import React from "react";
import { useSelector } from "react-redux";
import { Link } from "react-router-dom";
import { PostAuthor } from "./PostAuthor";
import { ReactionButtons } from "./ReactionButtons";
import { selectPostById } from "./postsSlices";

export const SinglePostPage = ({match}) => {
  const {postId} = match.params

  const post = useSelector(state => selectPostById(state, postId))

  if (!post) {
    return (
      <section>
        <h2>Page not Found!</h2>
      </section>
    )
  }

  return (
    <section>
      <article className="post">
        <h2>{post.title}</h2>
        <PostAuthor authorId={post.user}></PostAuthor>
        <p className="post-content">{post.content}</p>
        <Link to={`/editPosts/${post.id}`} className="button">
          Edit Post
        </Link>
      </article>
      <ReactionButtons post={post}/>
    </section>
  )
}